<template>
  <a-card :bordered="false">

    <div>
      <a-row>
        <a-col :span="12">
          <a>部门名称:</a>
          <a-input placeholder="Basic usage" style="width: 250px;margin-left: 10px"/>
          <a-button type="primary" icon="search" style="margin-left: 10px">
            搜索
          </a-button>
        </a-col>
      </a-row>
      <br>
      <a-row>
        <a-button type="primary" style="background-color: #00ff80" @click="showadd()">
          新增
        </a-button>
      </a-row>
      <br>
      <a-table :data-source="data" rowKey="deptId" :pagination="pagination">
        <a-table-column title="序号">
         <template slot-scope="text,record,index">
            {{index+1}}
          </template>
        </a-table-column>
        <a-table-column title="部门名称" data-index="deptName"></a-table-column>
        <a-table-column title="部门状态">
          <template slot-scope="text,record,index">
            <a v-if="record.deptState==0" style="color: #2eabff">可用</a>
            <a v-else style="color: red">冻结</a>
          </template>
        </a-table-column>
        <a-table-column title="部门说明" data-index="deptRemark"></a-table-column>
        <a-table-column title="操作">
          <template slot-scope="text,record,index">
            <a-button style="background-color: #2eabff;color: white">编辑</a-button>
            <a-button style="background-color: red;color: white">删除</a-button>
          </template>
        </a-table-column>
      </a-table>
      <a-pagination v-model="current" :total="total" :pageSize="pageSize" show-less-items/>
      <a-modal v-model="isShowAdd" title="新增部门" @ok="addDpet" @cancel="cancelAdd">
        <a-form-model :model="dept" :label-col="labelCol" :wrapper-col="wrapperCol">
          <a-form-model-item label="部门名称">
            <a-input v-model="dept.deptName"/>
          </a-form-model-item>
          <a-form-model-item label="部门状态">
            <a-radio-group v-model="dept.deptState">
              <!--单选按钮默认匹配数值选中问题，在value属性前添加:-->
              <a-radio :value="0">可用</a-radio>
              <a-radio :value="1">不可用</a-radio>
            </a-radio-group>
          </a-form-model-item>
          <a-form-model-item label="部门说明">
            <a-input v-model="dept.deptRemark" type="textarea"/>
          </a-form-model-item>
        </a-form-model>
      </a-modal>
    </div>
  </a-card>
</template>

<script>
  //@相当于src
  import {getAction} from '@/api/manage'
  import ARow from "ant-design-vue/es/grid/Row";
  import ACol from "ant-design-vue/es/grid/Col";
  import ATableColumn from "ant-design-vue/es/table/Column";
  import AFormModelItem from "ant-design-vue/es/form-model/FormItem";

  export default {
    components: {AFormModelItem, ATableColumn, ACol, ARow},
    data() {
      return {
        deptName: "",
        pagination: false,
        current: 2,
        pageNum: 1,
        pageSize: 3,
        total: 30,
        isShowAdd: false,
        labelCol: {span: 4},
        wrapperCol: {span: 14},
        dept: {
          deptName: '',
          deptState: 0,//如果想要表格中默认选中值为0的项，注意在属性前使用冒号
          deptRemark: '',
          data: [
            {
              deptId: 1,
              deptName: '市场部',
              deptState: 0,
              deptRemark: 'xxxx'
            },
            {
              deptId: 2,
              deptName: '业务部',
              deptState: 1,
              deptRemark: 'xxxx'
            }
          ],
        }
      }},
        methods
    :
      {
        hello()
        {
          var url = "/njt/jeecgDemo/hello"
          getAction(url).then((res) => {
            // 在原生开发中获取后端响应数据是通过：res.data
            // 为什么现在不使用data就可以获取到后端响应数据
            // 原因：就是因为有响应拦截器，拦截器中已经处理了，将后端响应对象数据获取传入参数res
            if (res.success) {
              this.msg = res.result;
            }
          })
        }
      ,
        showadd()
        {
          this.isShowAdd = true;
        },
      },
      created()
      {
        this.hello();
      }

  }
</script>